const statusClassMap = {
  completed: 'timeline-item--completed',
  warning: 'timeline-item--warning',
  error: 'timeline-item--error'
};

Component({
  options: {
    addGlobalClass: true,
    multipleSlots: true
  },

  properties: {
    title: {
      type: String,
      value: ''
    },
    time: {
      type: String,
      value: ''
    },
    description: {
      type: String,
      value: ''
    },
    status: {
      type: String,
      value: ''
    },
    active: {
      type: Boolean,
      value: false
    },
    isFirst: {
      type: Boolean,
      value: false
    },
    isLast: {
      type: Boolean,
      value: false
    },
    tagText: {
      type: String,
      value: ''
    },
    tagType: {
      type: String,
      value: 'info'
    }
  },

  data: {
    statusClass: ''
  },

  lifetimes: {
    attached() {
      this.updateStatus();
    }
  },

  observers: {
    status() {
      this.updateStatus();
    }
  },

  methods: {
    updateStatus() {
      const cls = statusClassMap[this.properties.status] || '';
      this.setData({ statusClass: cls });
    }
  }
});
